<template>
  <div class="container">
    <MyHeadNav>投诉建议</MyHeadNav>
    <Tabs :titleData="titleData">
      <template v-slot:content1>
        <div class="content">
          <div class="title">您要投诉的问题?</div>
          <div>
            <textarea class="text-box" v-model="question"></textarea>
          </div>
          <div class="title">你的联系方式</div>
          <div class="ipt-area">
            <input type="text" v-model="email" placeholder="邮箱" />
            <input type="text" v-model="phone" placeholder="手机号" />
          </div>
          <button @click="submitHandle">提交</button>
        </div>
      </template>
    </Tabs>
  </div>
</template>

<script>
import MyHeadNav from "../../components/MyNavHead";
import Tabs from "./tabs/Tabs";
import api from "../../api";
export default {
  name: "Suggest",
  components: {
    MyHeadNav,
    Tabs,
  },
  data() {
    return {
      titleData: ["我要投诉", "我有建议"],
      question: "请输入您的问题",
      phone: "",
      email: "",
    };
  },
  methods: {
    submitHandle() {
      this.$toast.loading("加载中");
      api
        .getSuggest({
          phone: this.phone,
          email: this.email,
          question: this.question,
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.$toast.success("提交成功");
            this.question = "请输入您的问题",
            this.phone = "",
            this.email = ''
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  background: #f1f1f1;
  .content {
    width: 100%;
    padding: 0.2rem;
    box-sizing: border-box;
    .title {
      text-align: left;
      margin-top: 0.3rem;
      padding-left: 0.2rem;
      font-size: 16px;
    }
    .text-box {
      width: 100%;
      height: 2.6rem;
      margin-top: 0.2rem;
      padding-left: 0.2rem;
      box-sizing: border-box;
      background: #fff;
      border-radius: 2px;
      color: rgba(0, 0,0,.8);
      font-size: 14px;
      border: none;
    }
    .ipt-area {
      width: 100%;
      input {
        width: 100%;
        height: 0.65rem;
        line-height: 0.6rem;
        padding-left: 0.2rem;
        margin: 0.2rem 0;
        box-sizing: border-box;
        font-size: 14px;
      }
    }
    button {
      width: 70%;
      height: 0.9rem;
      margin: 0 auto;
      background: #ff5555;
      border-radius: 3px;
      margin-top: 0.25rem;
      letter-spacing: 1px;
      border: none;
      color: #fff;
    }
  }
}
</style>